<template>
  <div class="box pagestyle">
    <div class="mineinfo">
      <div class="title">矿井信息</div>
      <el-form :model="form" label-width="auto">
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">煤矿编码</div>
                <el-input
                v-model="form.mineCode"
                style="width: 284px"
                placeholder="请输入"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">煤矿全称</div>
                <el-input
                  v-model="form.mineFullName"
                  style="width: 284px"
                  placeholder="请输入"
                  @change="setMineAbbreviation"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">煤矿简称</div>
                <el-input
                  v-model="form.mineAbbreviation"
                  :disabled='!form.mineFullName'
                  style="width: 284px"
                  placeholder="请输入"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">经济类型</div>
                <el-select v-model="form.economyType" @blur="selectBlur" clearable filterable placeholder="请选择" style="width: 284px">
                  <el-option
                    v-for="item in economyTypeArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">省/市/区</div>
                <el-cascader :options="dataCitys" style="width: 284px" @change="onChange" clearable v-model="address"/>
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">详细地址</div>
                <el-input
                  min="0"
                  v-model="form.detailAddress"
                  style="width: 284px"
                  placeholder="请输入"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">安全生产起始日</div>
                <el-date-picker
                  style="width: 284px"
                  v-model="form.productStartTime"
                  type="datetime"
                  placeholder="请选择"
                  format="YYYY-MM-DD hh:mm:ss"
                  value-format="YYYY-MM-DD hh:mm:ss"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">核定生产能力（万吨）</div>
                <el-input
                  min="0"
                  v-model="form.productAbility"
                  style="width: 284px"
                  placeholder="请输入"
                />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">核定下井人数（人）</div>
                <el-input
                v-model="form.mineNumber"
                style="width: 284px"
                placeholder="请输入"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">主井口坐标</div>
                <el-input
                  v-model="form.mainWellheadLocation"
                  style="width: 284px"
                  placeholder="请输入"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">副井口坐标</div>
                <el-input
                  v-model="form.deputyWellheadLocation"
                  style="width: 284px"
                  placeholder="请输入"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">井田面积（平方千米）</div>
                <el-input
                  v-model="form.mineFieldArea"
                  style="width: 284px"
                  placeholder="请输入"
                />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">井田区域坐标</div>
                <el-input
                v-model="form.mineFieldRegionLocation"
                style="width: 284px"
                placeholder="请输入"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">可采煤层</div>
                <el-input
                  v-model="form.mineableCoalSeam"
                  style="width: 284px"
                  placeholder="请输入"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">采矿许可证编号</div>
                <el-input
                  v-model="form.mineLicenseNumber"
                  style="width: 284px"
                  placeholder="请输入"
                  @blur="checkCMine"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">安全生产许可证编号</div>
                <el-input
                  v-model="form.safetyProductLicenseNumber"
                  style="width: 284px"
                  placeholder="请输入"
                  @blur="checkMineCode"
                />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">工商执照编号</div>
                <el-input
                v-model="form.businessLicenseNumber"
                style="width: 284px"
                placeholder="请输入"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">矿井瓦斯等级</div>
                <el-select v-model="form.gasLevel" @blur="selectBlur3" clearable filterable placeholder="请选择" style="width: 284px">
                  <el-option
                    v-for="item in gasLevelArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">绝对瓦斯涌出量（立方米/分钟）</div>
                <el-input
                  min="0"
                  v-model="form.absoluteGasEmission"
                  style="width: 284px"
                  placeholder="请输入"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">相对瓦斯涌出量（立方米/吨）</div>
                <el-input
                  v-model="form.relativeGasEmission"
                  style="width: 284px"
                  placeholder="请输入"
                />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">是否冲击地压矿井</div>
                <el-radio-group v-model="form.impactMine" style="width: 284px">
                  <el-radio :label="true" size="large">是</el-radio>
                  <el-radio :label="false" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">矿长</div>
                <el-select v-model="form.mineManager" @blur="selectBlur2" clearable filterable placeholder="请选择" style="width: 284px">
                  <el-option
                    v-for="item in mineManagerArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">矿长安全生产许可资格证编号</div>
                <el-input
                  v-model="form.managerProductLicenseNumber"
                  style="width: 284px"
                  placeholder="请输入"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">矿长资格证编号</div>
                <el-input
                  v-model="form.managerLicenseNumber"
                  style="width: 284px"
                  placeholder="请输入"
                />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title" style="width:100%;display:flex;justify-content:space-between;">
                  工作班次数量 
                  <div style="font-size:14px;color:#409eff;cursor: pointer;" @click="goBanci">设置班次</div>
                </div>
                <el-input
                  v-model="form.workClassNumber "
                  disabled
                  style="width: 284px"
                  placeholder="请输入"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">应急联系人</div>
                <el-input
                  v-model="form.emergencyContact"
                  style="width: 284px"
                  placeholder="请输入"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">应急联系人电话</div>
                <el-input
                  v-model="form.emergencyContactNumber"
                  style="width: 284px"
                  placeholder="请输入"
                  @blur="checkPhoneNum"
                />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">安标编号</div>
                <el-input
                  v-model="form.safetyLabelNumber"
                  style="width: 284px"
                  placeholder="请输入"
                  @change="setMineAbbreviation"
                />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">上传背景</div>
                <el-upload
                  v-if="!fileObj.name"
                  v-model:file-list="fileList"
                  :show-file-list="false"
                  :action="baseurl + '/common/upload'"
                  :headers="{ Authorization: getToken() }"
                  :on-remove="handleRemove"
                  :on-success="onsuccess"
                  :before-upload="beforeUPload"
                >
                  <div style="width: 284px">
                    <img src="@/assets/images/上传照片.svg" alt="">
                  </div>
                </el-upload>
                <div class="fileList" v-if="fileObj.name">
                  <div class="name" :title="fileObj.name">
                    <img src="@/assets/images/例图.svg" alt="" style="vertical-align: middle;">
                    {{fileObj.name}}
                  </div>
                  <div class="caozuo">
                    <el-progress  v-if="progress != 100" type="circle" :show-text="false" :percentage="progress" /> 
                    <div v-if="progress = 100" @click="handlePreview">查看</div>
                    <img v-if="progress = 100" @click="downloadImg" src="@/assets/images/下载.svg" alt="">
                    <img v-if="progress = 100" @click="deleteImg" src="@/assets/images/删除.svg" alt="">
                  </div>
                </div>
                <el-dialog v-model="dialogVisible" style="heigth:800px;">
                  <img w-full :src="form.backgroundUrl" alt="Preview Image"/>
                </el-dialog>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">上传应急预案</div>
                <el-upload
                  v-if="!fileObj2.name"
                  v-model:file-list="fileList"
                  :show-file-list="false"
                  :action="baseurl + '/common/upload'"
                  :headers="{ Authorization: getToken(),'Content-Disposition':'inline' }"
                  :on-success="onsuccess2"
                  :before-upload="beforeUPload2"
                >
                  <div style="width: 284px">
                    <img src="@/assets/images/上传文档.svg" alt="">
                  </div>
                </el-upload>
                <div class="fileList" v-if="fileObj2.name">
                  <div class="name" :title="fileObj2.name">
                    {{fileObj2.name}}
                  </div>
                  <div class="caozuo">
                    <el-progress  v-if="progress2 != 100" type="circle" :show-text="false" :percentage="progress2" /> 
                    <div v-if="progress2 = 100" @click="handlePreview2">查看</div>
                    <img v-if="progress2 = 100" @click="downloadFile" src="@/assets/images/下载.svg" alt="">
                    <img v-if="progress2 = 100" @click="deleteFile" src="@/assets/images/删除.svg" alt="">
                  </div>
                </div>
                <el-dialog v-model="dialogVisible2" style="height:800px;">
                  <iframe :src="form.emergencyPlanUrl" frameborder="0" v-if="fileObj2.name.includes('pdf')" style="width:100%;height:700px"></iframe>
                  <vue-office-docx
                    :src="form.emergencyPlanUrl"
                    style="height:700px"
                  />
                </el-dialog>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">上传深色logo</div>
                <el-upload
                  v-if="!fileObj3.name"
                  v-model:file-list="fileList"
                  :show-file-list="false"
                  :action="baseurl + '/common/upload'"
                  :headers="{ Authorization: getToken(),'Content-Disposition':'inline' }"
                  :on-success="onsuccess3"
                  :before-upload="beforeUPload3"
                >
                  <div style="width: 284px">
                    <img src="@/assets/images/上传照片.svg" alt="">
                  </div>
                </el-upload>
                <div class="fileList" v-if="fileObj3.name">
                  <div class="name" :title="fileObj3.name">
                    {{fileObj3.name}}
                  </div>
                  <div class="caozuo">
                    <el-progress  v-if="progress3 != 100" type="circle" :show-text="false" :percentage="progress3" /> 
                    <div v-if="progress3 = 100" @click="handlePreview3">查看</div>
                    <img v-if="progress3 = 100" @click="downloadImg3" src="@/assets/images/下载.svg" alt="">
                    <img v-if="progress3 = 100" @click="deleteImg3" src="@/assets/images/删除.svg" alt="">
                  </div>
                </div>
                <el-dialog v-model="dialogVisible3" style="height:800px;">
                  <img w-full :src="form.logoUrl" alt="Preview Image"/>
                </el-dialog>

                
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <div class="grid-content ep-bg-purple" />
            <el-form-item >
                <div class="item_title">上传浅色logo</div>
                <el-upload
                  v-if="!fileObj4.name"
                  v-model:file-list="fileList"
                  :show-file-list="false"
                  :action="baseurl + '/common/upload'"
                  :headers="{ Authorization: getToken(),'Content-Disposition':'inline' }"
                  :on-success="onsuccess4"
                  :before-upload="beforeUPload4"
                >
                  <div style="width: 284px">
                    <img src="@/assets/images/上传照片.svg" alt="">
                  </div>
                </el-upload>
                <div class="fileList" v-if="fileObj4.name">
                  <div class="name" :title="fileObj4.name">
                    {{fileObj4.name}}
                  </div>
                  <div class="caozuo">
                    <el-progress  v-if="progress4 != 100" type="circle" :show-text="false" :percentage="progress4" /> 
                    <div v-if="progress4 = 100" @click="handlePreview4">查看</div>
                    <img v-if="progress4 = 100" @click="downloadImg4" src="@/assets/images/下载.svg" alt="">
                    <img v-if="progress4 = 100" @click="deleteImg4" src="@/assets/images/删除.svg" alt="">
                  </div>
                </div>
                <el-dialog v-model="dialogVisible4" style="height:800px;">
                  <img w-full :src="form.lightLogoUrlogoUrl" alt="Preview Image"/>
                </el-dialog>

                
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <div class="btns">
        <el-button @click="getMineInfo">取消</el-button>
        <el-button type="primary" style="background-color:#409eff;border:1px solid #409eff;" @click="saveMineInfo">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
import axios from "@/utils/request"
import { getToken } from '@/utils/auth'
import { dataCitys } from '@/utils/citys'
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import usePagesStore from '@/store/modules/pages'

const router = useRouter();
const pagesStore = usePagesStore()

let baseurl = import.meta.env.VITE_APP_BASE_API;
// 图片上传
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const fileObj = ref({})
const progress = ref(0)
let timer = null
const beforeUPload = () =>{
  progress.value = 0
  timer = setInterval(() => {
    if(progress.value <= 99){
      progress.value += 5
    }
  }, 1000);
}
const onsuccess = (res,fileList) => {
  setTimeout(()=>{
    clearInterval(timer)
    progress.value = 100
  },5000)
  console.log(res,fileList);
  form.value.backgroundUrl = res.url
  fileObj.value = fileList
}
const handlePreview = () => {
  // dialogImageUrl.value = fileObj.value.response.url
  dialogVisible.value = true
}
// 下载图片
const downloadImg = () => {
  fetch(fileObj.value.response.fileName).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
	  const a = document.createElement('a')
	  a.href = URL.createObjectURL(blob)
	  console.log(a.href)
	  a.download = fileObj.value.name  // 下载文件的名字
	  document.body.appendChild(a)
	  a.click()
  })
}
// 删除图片
const deleteImg = () => {
  fileObj.value = {}
  form.value.backgroundUrl = ''
}

const dialogUrl = ref('')
const dialogVisible2 = ref(false)
const fileObj2 = ref({})
const progress2 = ref(0)
let timer2 = null
const beforeUPload2 = () =>{
  progress2.value = 0
  timer2 = setInterval(() => {
    if(progress2.value <= 99){
      progress2.value += 5
    }
  }, 1000);
}
const onsuccess2 = (res,fileList) => {
  setTimeout(()=>{
    clearInterval(timer2)
    progress2.value = 100
  },5000)
  console.log(res,fileList);
  form.value.emergencyPlanUrl = res.url
  fileObj2.value = fileList
}
const handlePreview2 = (uploadFile) => {
  // dialogUrl.value = fileObj2.value.response.url
  dialogVisible2.value = true
}
// 下载文档
const downloadFile = () => {
  fetch(fileObj2.value.response.fileName).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
	  const a = document.createElement('a')
	  a.href = URL.createObjectURL(blob)
	  console.log(a.href)
	  a.download = fileObj2.value.name  // 下载文件的名字
	  document.body.appendChild(a)
	  a.click()
  })
}
// 删除文档
const deleteFile = () => {
  fileObj2.value = {}
  form.value.emergencyPlanUrl = ''
}

// 图片上传
const dialogImageUrl3 = ref('')
const dialogVisible3 = ref(false)
const fileObj3 = ref({})
const progress3 = ref(0)
let timer3 = null
const beforeUPload3 = () =>{
  progress3.value = 0
  timer3 = setInterval(() => {
    if(progress3.value <= 99){
      progress3.value += 5
    }
  }, 1000);
}
const onsuccess3 = (res,fileList) => {
  setTimeout(()=>{
    clearInterval(timer3)
    progress3.value = 100
  },5000)
  console.log(res,fileList);
  form.value.logoUrl = res.url
  fileObj3.value = fileList
}
const handlePreview3 = () => {
  // dialogImageUrl3.value = fileObj3.value.response.url
  dialogVisible3.value = true
}
// 下载图片
const downloadImg3 = () => {
  fetch(fileObj3.value.response.fileName).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
	  const a = document.createElement('a')
	  a.href = URL.createObjectURL(blob)
	  a.download = fileObj3.value.name  // 下载文件的名字
	  document.body.appendChild(a)
	  a.click()
  })
}
// 删除图片
const deleteImg3 = () => {
  fileObj3.value = {}
  form.value.logoUrl = ''
}

// 图片上传
const dialogImageUrl4 = ref('')
const dialogVisible4 = ref(false)
const fileObj4 = ref({})
const progress4 = ref(0)
let timer4 = null
const beforeUPload4 = () =>{
  progress4.value = 0
  timer3 = setInterval(() => {
    if(progress4.value <= 99){
      progress4.value += 5
    }
  }, 1000);
}
const onsuccess4 = (res,fileList) => {
  setTimeout(()=>{
    clearInterval(timer3)
    progress4.value = 100
  },5000)
  console.log(res,fileList);
  form.value.lightLogoUrl = res.url
  fileObj4.value = fileList
}
const handlePreview4 = () => {
  // dialogImageUrl3.value = fileObj3.value.response.url
  dialogVisible3.value = true
}
// 下载图片
const downloadImg4 = () => {
  fetch(fileObj4.value.response.fileName).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
	  const a = document.createElement('a')
	  a.href = URL.createObjectURL(blob)
	  a.download = fileObj4.value.name  // 下载文件的名字
	  document.body.appendChild(a)
	  a.click()
  })
}
// 删除图片
const deleteImg4 = () => {
  fileObj4.value = {}
  form.value.lightLogo = ''
}


const form = ref({})
const economyTypeArr = ref([
  {label:'有限责任公司',value:'有限责任公司'}
])
const mineManagerArr = ref([])
const gasLevelArr = ref([
  {label:'低瓦斯矿井',value:'低瓦斯矿井'},
  {label:'高瓦斯矿井',value:'高瓦斯矿井'},
  {label:'瓦斯突出矿井',value:'瓦斯突出矿井'}
])
const address = ref([])


// 经济类型可输入的下拉
const selectBlur = e => {
  if (e.target.value !== '') {
    form.value.economyType = e.target.value;
  }
};
// 矿长可输入的下拉
const selectBlur2 = e => {
  if (e.target.value !== '') {
    form.value.mineManager = e.target.value;
  }
};
// 瓦斯等级可输入的下拉
const selectBlur3 = e => {
  if (e.target.value !== '') {
    form.value.gasLevel = e.target.value;
  }
};

// 省市区选择时执行
const onChange = (val) =>{
  console.log(val);
  form.value.address = val.join('-')
}
// 自动填写煤矿简称
const setMineAbbreviation = () => {
  form.value.mineAbbreviation = form.value.mineFullName
}
// 跳转班次信息页面
const goBanci = () =>{
  router.push({
    path: "/cspz/basicConfig/config_shiftInfo",
  });
}

// 获取矿井信息
const getMineInfo = () => {
  axios.post('/mine/info/search').then(res => {
    console.log(res);
    form.value = res.data
    address.value = form.value.address.split('-')
    form.value.workClassNumber = ''
    getCountAll()
    progress.value = 100
    progress2.value = 100
    progress3.value = 100
    fileObj.value.name = res.data.backgroundUrlName
    fileObj2.value.name = res.data.emergencyPlanUrlName
    fileObj3.value.name = res.data.logoUrlName
    fileObj.value.response = {}
    fileObj2.value.response = {}
    fileObj3.value.response = {}
    fileObj.value.response.fileName = res.data.backgroundUrl
    fileObj2.value.response.fileName = res.data.emergencyPlanUrl
    fileObj3.value.response.fileName = res.data.logoUrl
    pagesStore.logoUrl = res.data.logoUrl
    pagesStore.safetyNum = res.data.safetyLabelNumber
  })
}

// getMineInfo()
// 获取班次
const getCountAll = () =>{
  axios.post('/class/info/countAll').then(res => {
    console.log(res.data);
    form.value.workClassNumber = res.data.classNum
  })
}

// 保存矿井信息
const saveMineInfo = () => {
  axios.post('/mine/info/add',form.value).then(res => {
    if(res.code == 200){
      ElMessage.success('操作成功')
      getMineInfo()
    }
  })
}


// 手机号校验
const checkPhoneNum = () =>{
  let isPhoneNumberValid = false
  const regex = /^1[3456789]\d{9}$/; // 手机号正则表达式
  isPhoneNumberValid = regex.test(form.value.emergencyContactNumber)
  if(isPhoneNumberValid){

  }else{
    ElMessage.error('手机号码格式不正确')
  }
}
// 校验煤矿安全生产许可证编号  （川）MK安许证字〔2021〕5116021971A
const checkMineCode = () =>{
  const regex = /^（[京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新台港澳]）MK安许证字〔\d{4}〕\d{10}[A-B]$/; // 正则表达式匹配格式
  if (!regex.test(form.value.safetyProductLicenseNumber)) {
    ElMessage.error('请输入有效的煤矿安全生产许可证编号');
  }
}
// 校验采矿许可证编号 C5118002010127120096737
const checkCMine = () => {
  const regex = /^C\d{6}\d{6}[12345678]{1}[123]{1}[123456]{1}\d{7}$/; // 正则表达式匹配格式
  if (!regex.test(form.value.mineLicenseNumber)) {
    ElMessage.error('请输入有效的采矿许可证编号');
  }
}
</script> 
<style lang="scss" scoped>
::v-deep .el-progress-circle{
  width: 20px !important;
  height: 20px !important;
}

.fileList{
  width: 284px;
  height: 32px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  .name{
    width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .caozuo{
    width: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    div{
      cursor: pointer;
      font-size: 12px;
      color: rgba(64, 158, 255, 1);
    }
    img{
      cursor: pointer;
    }
  }
}

.el-form-item{
    width: 284px;
    margin: 0;
}

.box {
  padding: 12px;
  background: #fff;
  ::v-deep .el-form-item--default .el-form-item__content{
    line-height: normal;
  }
  .mineinfo {
    padding: 0 16px;
    height: 100%;
    background: #fff;
    .title {
      padding: 20px 0px;
      height: 56px;
      font-size: 16px;
      font-weight: 700;
      color: #3e464f;
    }
    .item_title {
      margin: 0 0 12px 0;
      color: rgba(62, 70, 79, 0.8);
      font-size: 14px;
      font-weight: 400;
    }
    .btns{
      position: absolute;
      right: 20px;
      bottom: 20px;
    }
    .url{
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
</style>
